<template>
  <div class="app-container">
    <!-- 搜索功能，需要时打开 -->

    <div>
      <!-- v-if="crud.props.searchToggle" -->
      <div class="head-container">
        <el-select
          v-model="query.language"
          clearable
          size="small"
          style="width: 180px"
          class="filter-item"
          placeholder="请选择语言"
        >
          <el-option
            v-for="(key, value) in {
              1: '中文简体',
              2: '英文',
              3: '俄罗斯',
              4: '日语',
              5: '加拿大'
            }"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>

        <!-- <el-input
          v-model="query.name"
          clearable
          placeholder="请输入广告名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-date-picker
          v-model="params.date"
          clearable
          type="daterange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item"
          range-separator="~"
          style="width: 380px"
          start-placeholder="请选择开始时间"
          end-placeholder="请选择到期时间"
        /> -->
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permission="permission" />
    </div>

    <!-- 表格添加或者编辑部分 -->
    <el-drawer
      :visible.sync="crud.status.cu > 0"
      :before-close="crud.cancelCU"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="550px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>{{ crud.status.title }}</span>
        <span class="el-icon-close" @click="crud.cancelCU" />
      </div>

      <div class="drawer-content">
        <el-scrollbar
          :native="false"
          :noresize="false"
          class="dark fix bannerform"
        >
          <el-form
            ref="form"
            :inline="true"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <!-- 广告图片 -->
            <el-form-item label="广告图片" prop="bannerUrl">
              <el-upload
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="form.bannerUrl"
                  :src="form.bannerUrl"
                  class="avatar"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <p class="warning-text" style="font-size: 12px">
                注意： 建议尺寸为606*266,请确认好尺寸再上传
              </p>
            </el-form-item>

            <!-- <el-form-item label="广告名称" prop="name">
              <el-input v-model="form.name" style="width: 350px" />
            </el-form-item> -->

            <!-- <el-form-item label="广告位置" prop="region">
              <el-select v-model="form.region" placeholder="请选择广告位置" style="width: 350px">
                <el-option
                  v-for="(key, value) in {
                    1: '首页轮播',
                    2: '播时商城首页轮播',
                  }"
                  :key="key"
                  :label="key"
                  :value="+value"
                />
              </el-select>
            </el-form-item> -->

            <!-- 语言 -->
            <el-form-item label="语言" prop="language">
              <el-select
                v-model="form.language"
                placeholder="请选择语言"
                style="width: 350px"
              >
                <el-option
                  v-for="(key, value) in {
                    1: '中文简体',
                    2: '英文',
                    3: '俄罗斯',
                    4: '日语',
                    5: '加拿大'
                  }"
                  :key="key"
                  :label="key"
                  :value="+value"
                />
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="商品编号" prop="link">
              <el-input v-model="form.link" style="width: 350px" />
            </el-form-item> -->

            <!-- 展示权重 -->
            <el-form-item label="展示权重" prop="weight">
              <el-input v-model="form.weight" style="width: 350px" />
              <p class="warning-text" style="font-size: 12px">
                数字越小，排位越靠前。 1~100
              </p>
            </el-form-item>

            <!-- <el-form-item label="广告备注" prop="note">
              <el-input v-model="form.note" type="textarea" :rows="5" style="width: 350px" />
            </el-form-item> -->

            <!-- 关联公告ID -->
            <!-- <el-form-item label="关联公告ID" prop="url">
              <el-input v-model="form.url" type="textarea" :rows="5" placeholder="请输入公告ID" style="width: 350px" />
            </el-form-item> -->

            <!-- <el-form-item label="开始时间" prop="startDate">
              <template>
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  style="display: block;margin-bottom: 12px;width: 350px"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择开始时间"
                />
              </template>
            </el-form-item> -->

            <!-- <el-form-item label="结束时间" endTime>
              <template>
                <el-date-picker
                  v-model="form.endDate"
                  type="datetime"
                  style="display: block;margin-bottom: 12px;width: 350px"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择结束时间"
                />
                <p class="warning-text" style="font-size: 12px">没有到期时间则永久有效</p>
              </template>
            </el-form-item> -->
          </el-form>
        </el-scrollbar>
        <div class="fix-bottom">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >确认</el-button
          >
        </div>
      </div>
    </el-drawer>

    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column label="编号" type="index" width="50" />
      <el-table-column
        v-if="columns.visible('bannerUrl')"
        :show-overflow-tooltip="true"
        prop="useType"
        label="banner图片"
      >
        <template slot-scope="scope">
          <img
            v-if="scope.row.bannerUrl"
            :src="scope.row.bannerUrl"
            style="height: 40px"
            alt
          >
        </template>
      </el-table-column>

      <!-- <el-table-column
        v-if="columns.visible('name')"
        :show-overflow-tooltip="true"
        prop="name"
        label="广告名称"
      />-->

      <el-table-column
        v-if="columns.visible('weight')"
        :show-overflow-tooltip="true"
        prop="weight"
        label="权重"
      />

      <el-table-column
        v-if="columns.visible('language')"
        :show-overflow-tooltip="true"
        prop="language"
        label="语言"
      >
        <!-- 1: '中文简体',
              2: '英文',
              3: '俄罗斯',
              4: '日语',
              5: '加拿大', -->
        <template slot-scope="scope">
          <p>
            <!-- {{ {1: '中文简体',2: '英文',3: '俄罗斯,'4: '日语',5: '加拿大'}[scope.row.language] }} -->
            {{ {1:'中文简体',2:'英文',3:'俄罗斯',4:'日语',5:'加拿大'}[scope.row.language] }}
          </p>
        </template>
      </el-table-column>

      <!-- <el-table-column
        v-if="columns.visible('startDate')"
        :show-overflow-tooltip="true"
        prop="startDate"
        label="开始时间"
      >
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.startDate) }}</p>
        </template>
      </el-table-column>-->

      <!-- <el-table-column
        v-if="columns.visible('endTime')"
        :show-overflow-tooltip="true"
        endTime
        label="到期时间"
      >
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.endTime) }}</p>
        </template>
      </el-table-column>-->

      <el-table-column
        v-if="columns.visible('createAt')"
        :show-overflow-tooltip="true"
        prop="createAt"
        label="修改时间"
      >
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.createAt) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            msg="确定要删除该广告图？"
          />
          <!-- <el-button
            v-permission="['banner:del']"
            type="text"
            @click="deletebanner(scope.row)"
          >删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header, crud, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import bannerMethod from '../../api/placfg'
import { regexp } from '../../utils/regexp'
import { parseTime } from '../../utils'
// import { getmyCentre } from '../../api/banner'
// crud交由presenter持有
const defaultCrud = CRUD({
  url: '/admin/banner/list',
  title: '广告',
  crudMethod: { ...bannerMethod }
})

const defaultForm = {
  // name: null,
  // startDate: null,
  // endDate: null,
  // sortNum: null,
  // link: null,
  // note: null,

  bannerUrl: '', // banner图片地址
  language: null, // 语言id   语言 1 中文 ，2 英文
  weight: null, // 权重 越大越前
  url: null, // 跳转公告id
  type: 0 // 跳转公告id
}
export default {
  name: 'Banner',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), crud(), form(defaultForm)],
  data() {
    return {
      action: '/defi/upload/1',
      params: {},
      permission: {
        // add: ['admin', 'banner:add'],
        // edit: ['admin', 'banner:edit'],
        // del: ['admin', 'banner:del']
      },

      rules: {
        // name: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
        // startDate: [
        //   { required: true, message: "请选择开始时间", trigger: "change" }
        // ],
        // endDate: [
        //   { required: true, message: "请选择到期时间", trigger: "change" }
        // ],
        // link: [{ required: true, message: "请输入商品编号", trigger: "blur" }],

        // region: [
        //   { required: true, message: "请选择广告位置", trigger: "change" }
        // ],

        bannerUrl: [
          { required: true, message: '请上传广告图', trigger: 'blur' }
        ],

        language: [
          {
            required: true,
            message: '请选择语言',
            trigger: 'change'
          }
        ],

        weight: [
          {
            required: true,
            message: '请输入展示权重',
            trigger: 'blur'
          }
        ]
      },
      cruddata: [
        {
          id: '1',
          account: '8888',
          nickName: '毛文明',
          phone: '13023677751',
          idnumber: '410422199706014832',
          name: '毛书洋',
          gender: 1,
          level: 2,
          region: 2,
          createAt: '2020-05-12',
          applycreateAt: '2020-10-12',
          birthday: '1990-08-09',
          statusContent: 0
        }
      ]
    }
  },
  mounted() {
    // this.getmyCentre()
  },
  methods: {
    // getmyCentre() {
    //   getmyCentre().then((res) => {})
    // },

    [CRUD.HOOK.beforeReset]() {
      this.params = {}
    },
    [CRUD.HOOK.beforeRefresh](crud) {
      const { date } = this.params
      console.log(date)
      if (date) {
        const [startDate, endDate] = date
        crud.query.startDate = startDate
        crud.query.endDate = endDate
      } else {
        crud.query.startDate = ''
        crud.query.endDate = ''
      }
    },

    [CRUD.HOOK.beforeToEdit](crud) {
      console.log(crud.form)
      const str = parseTime(crud.form.startDate)
      const strend = parseTime(crud.form.endDate)

      this.$set(crud.form, 'startDate', str)
      this.$set(crud.form, 'endDate', strend)
    },

    // 新增下级
    handleAvatarSuccess(res, file) {
      this.form.bannerUrl = res.data
    },

    beforeAvatarUpload(file) {}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.bannerform {
  .avatar-uploader .el-upload {
    width: 350px !important;
    height: 150px !important;
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
  }

  .avatar-uploader-icon {
    font-size: 18px !important;
    color: #8c939d !important;
    width: 350px !important;
    height: 150px !important;
    line-height: 150px !important;
    text-align: center !important;
  }

  .avatar {
    width: 350px !important;
    height: 150px !important;
    display: block !important;
  }
}
</style>
